<template>
  <!-- ActivityDetails 活动详情 -->
  <div class="disFlx gap-10 flexAStart flexCenter">
    <div class="wrapper-phone">
      <img src="@/assets/status-bar.jpg" style="width: 100%;" />
      <img src="@/assets/activity-detail-nav.jpg" style="width: 100%;" />
      <div class="activity-preview" style="position: relative">
        <Banner :banner-url="data.coverUrl" :end-time="data.enrollEndTime"></Banner>
        <div class="info-conatiner">
          <BasicInformation :title="data.title" :registrations-number="data.passedNum" :address-name="data.addressName"
            :address="data.address" :longitude="String(data.longitude)" :latitude="String(data.latitude)"
            :start-time="data.startTime" :end-time="data.endTime" :start-price="data.minPrice"
            :original-price="data.originalPrice" :tag-name="data.tagName">
          </BasicInformation>

          <OrganizingUnit :organizingUnitList="organizingUnitList"></OrganizingUnit>
          <div v-for="(item, index) in richTextData" :key="index" :id="item.id">
            <RichText :title="item.moduleName" :content="item.introduce" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="data.reviewQrCode" class="qr-code-box">
      <img :src="data.reviewQrCode" />
      <span>微信扫一扫预览</span>
    </div>
  </div>

</template>

<script>
import Banner from "./components/Banner.vue";
import BasicInformation from "./components/BasicInformation.vue";
import OrganizingUnit from "./components/OrganizingUnit.vue";
import RichText from "./components/RichText.vue";
import { getDetailPreviewList, getPreviewActivityPartners, getActivityReview } from "@/api/activity/activity.js";
export default {
  name: 'ActivityDetails',
  components: {
    Banner,
    BasicInformation,
    OrganizingUnit,
    RichText,
  },

  data() {
    return {
      data: {},
      params: {
        activityId: undefined,
        partnerReviewRecordId: undefined
      },
      richTextData: [],
      organizingUnitList: []
    };
  },
  computed: {
    oprationText() {
      return this.data.displayRegister ? '查看全部' : '';
    },
    excessHeight() {
      return this.headerHeight + this.tabsHeight;
    },
  },

  mounted() {
    this.params = this.$route.query
    const scrollbarWidth = this.getScrollbarWidth();
    document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
    this.queryActivityReview();
    this.queryDetailPreviewList();
    this.queryPreviewActivityPartners();
  },
  updateDocumentTitle() {
    if (this.$route.query.id) {
      document.title = '活动合作审核';
    } else {
      document.title = '活动预览';
    }
  },
  methods: {
    async queryDetailPreviewList() {
      const res = await getDetailPreviewList(this.params)
      if (res.code != 0) return;
      this.richTextData = res.data
    },
    async queryPreviewActivityPartners() {
      const res = await getPreviewActivityPartners(this.params)
      if (res.code != 0) return;
      this.organizingUnitList = res.data
    },
    async queryActivityReview() {
      const res = await getActivityReview(this.params)
      if (res.code != 0) return;
      this.data = res.data
    },

    getScrollbarWidth() {
      const outer = document.createElement("div");
      outer.style.visibility = "hidden";
      outer.style.width = "100px";
      outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
      document.body.appendChild(outer);
      const widthNoScroll = outer.offsetWidth;
      // force scrollbars
      outer.style.overflow = "scroll";
      const inner = document.createElement("div");
      inner.style.width = "100%";
      outer.appendChild(inner);
      const widthWithScroll = inner.offsetWidth;
      // remove divs
      outer.parentNode.removeChild(outer);
      return widthNoScroll - widthWithScroll;
    }
  },
};
</script>

<style lang="less" scoped>
.wrapper-phone {
  width: calc(375px + var(--scrollbar-width));
  background: white;
  overflow: hidden;
  border-radius: 8px;

  .activity-preview {

    // height: 667px;
    // overflow-y: scroll;

    .info-conatiner {
      padding: 0px 12px 16px 12px;
      position: relative;
      top: -23px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  }
}

.qr-code-box {
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  img {
    width: 140px;
    height: 140px;
  }

  span {
    color: #1D2129;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }
}
</style>